import React, { useState } from 'react';
import { Input, Checkbox, Popover, Button, Image, Space } from 'antd';
import MangeMask from './components/manageMash';
import aliOssUpload from '@/utils/aliOssUpload';
const Cephalogram = (props) => {
  const { label, desc, show, handleObj, index, listLength, disabled, imgObj = {} } = props;
  console.log(props);
  const { handleUpdate, handleSelect, handleRemove, handleUp, handleDown, handleImage } = handleObj;
  const { TextArea } = Input;
  const { src = 'error' } = imgObj;
  const [visible, setVisible] = useState(false);
  const openImagePicker = async () => {
    try {
      const fileHandle = await window.showOpenFilePicker({
        multiple: false, // 设置为 false 表示只能选择一个文件
        types: [
          {
            accept: {
              'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.tiff', '.svg']
            }
          }
        ]
      });
      // 处理文件，例如读取内容
      const file = fileHandle.values().next().value;
      const image = await file.getFile();
      const img = await aliOssUpload(image)
      return img.toString()
    } catch (error) {
      console.error(error);
    }
  }
  const content = (
    <div style={{ display: 'flex' }}>
      <Button type="primary" onClick={() => handleRemove(index)}>
        删除
      </Button>
    </div>
  );
  return (
    <>
      <Popover placement={'bottom'} content={content} trigger="hover">
        <div
          onClick={(e) => {
            e.stopPropagation();
            handleSelect(index);
          }}
          className={`renderSetting_img ${show && 'renderSetting_textSelect'}`}
        >
          {show && (
            <div className="renderSetting_absoluteBox">
              <div className="renderSetting_image">
                <Image
                  width={180}
                  height={88}
                  src={src}
                  fallback=""
                />
              </div>
              <Space>
                <Button
                  onClick={(e) => {
                    e.stopPropagation();
                    setVisible({ show: true });
                  }}
                  type="link"
                >
                  选择素材
                </Button>
                <Button
                  onClick={async (e) => {
                    e.stopPropagation();
                    const image = await openImagePicker()
                    if (image) {
                      handleImage({
                        src: image
                      }, index);
                    }

                  }}
                  type="link"
                >
                  本地上传
                </Button>
              </Space>

              <div className="renderSetting_img_desc">最佳分辨率750*320px</div>
              <div className="renderSetting_content_title">标题名称</div>
              <div className="renderSetting_content_input">
                <Input
                  maxLength={14}
                  disabled={disabled}
                  showCount
                  onChange={(e) => {
                    handleUpdate({
                      index: index,
                      key: 'label',
                      value: e.target.value,
                    });
                  }}
                  value={label}
                ></Input>
              </div>
              <div className="renderSetting_content_title">描述</div>
              <div className="renderSetting_content_input">
                <TextArea
                  maxLength={45}
                  showCount
                  onChange={(e) => {
                    handleUpdate({
                      index: index,
                      key: 'desc',
                      value: e.target.value,
                    });
                  }}
                  value={desc}
                ></TextArea>
              </div>
            </div>
          )}
          <div className="renderSetting_renderImage">
            <div className="renderSetting_renderImage_setting">
              <div className="renderSetting_header">{label}</div>
              <div className="renderSetting_desc">{desc}</div>
            </div>
            <Image
              width={373}
              height={160}
              src={src}
              fallback=""
            />
          </div>
        </div>
      </Popover>
      <MangeMask
        handleImage={(e) => {
          setVisible(() => {
            handleImage(e, index);
            return false;
          });
        }}
        visible={visible}
        onClose={() => setVisible(false)}
      ></MangeMask>
    </>
  );
};
export default Cephalogram;
